<div class="p0 col-xs-12" ng-init="getInterfaceDetail(false, true);">
    <div id="check-crap-debug-plug"></div>
    <div class="main-nav">
        <div class="btn-group btn-group-sm r3 fl mr10">
            <button class="btn btn-default" ng-click="goBack()" type="button">
                <i class="iconfont mt-3">&#xe697;&nbsp;</i>返回
            </button>

            <a class="btn btn-default btn-sm" type="button"
               ng-href="#/user/interface/edit?pageName=编辑接口&dataType=interface&id={{model.id}}&menu_a=menu-project&menu_b=menu_interface&projectName={{model.projectName}}&projectId={{model.projectId}}&moduleId={{$stateParams.moduleId}}">
                <i class="iconfont f12 mt-3">&#xe69e; 编辑</i>
            </a>

            <a class="btn btn-default btn-sm" type="button" id="refresh"
               ng-click="getInterfaceDetail(false, true);">
                <i class="iconfont mt-3">&#xe6aa;&nbsp; 刷新</i>
            </a>
        </div>
        <div class="fr mr10 btn btn-sm bug-priority-4 maw400" id="change-env"
             crap-project-id="{{$stateParams.projectId}}"
             onclick="loadEnvPick(this, event)">
            <span><i class="iconfont mt-3">&#xe619;&nbsp;</i></span>
            <span id="env-name">切换环境</span>
        </div>
    </div>

    <div class="col-xs-12 p20 mt50">
        <div class="col-xs-12 BGFFF p10">
            <div class="text-error b0 mb20 tl pl10" id="no-plug">
                将采用代理运行，如需调试本地接口，或支持host配置，请
                <a target="_blank" href="index.do#/article/detail?projectId=help&amp;moduleId=help&amp;type=ARTICLE&amp;id=153908629593401000133">
                下载接口调试增强插件
                </a>
            </div>

            <div class="text-success b0 mb20 tl pl10 none" id="has-plug">
                检测到已安装调试插件，将采用直接调试模式。小提示：点击右上角插件调试接口，能获取更多调试信息
            </div>



            <h4 class="main-bl-3 p5 pl20" ng-bind="'接口：' + model.interfaceName"></h4>
            <table class="w mt20">
                <tr>
                <td class="w100">
                        <input class="form-control cursor w100 btn-group" type="text" autocomplete="off" readonly id="method"
                               placeholder="请点击输入框选择" required ng-model="model.method"
                               ng-focus="loadPickByName('iwidth=220|radio=true|iheight=250|tag=method|code=REQUEST_METHOD|def='+model.method,$event)">
                    </td>
                    <td class="pl10">
                        <div class="input-group">
                            <input type="text" autocomplete="off" class="form-control btn-group" placeholder="请输入url" id="crap-debug-url" ng-model="model.fullUrl">
                            <span class="input-group-addon cursor btn-main" ng-click="debugInterface();" id="crap-debug-send">
                                <i class="iconfont">&#xe634;</i>发送
                            </span>
                            <span class="input-group-addon cursor btn-main none" id="crap-debug-send-new">
                                <i class="iconfont">&#xe634;</i>发送
                            </span>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="cb"></div>

        <div class="mt20 btn-group r0 mr10">
            <button ng-class="{true: 'btn btn-main param-type', false:'btn btn-default param-type'}[!debugShowParam]"
                    type="button" ng-click="debugShowParam = false">
                请求头
            </button>
            <button ng-class="{true: 'btn btn-main param-type', false:'btn btn-default param-type'}[debugShowParam]"
                    type="button" ng-click="debugShowParam = true">
                参数
            </button>
        </div>
        <div class="cb"></div>

        <!-- 请求头 -->
        <div ng-class="{true: 'mt10 BGFFF pb10 shadow', false:'mt10 BGFFF pb10 shadow none'}[!debugShowParam]">
            <table class="table-bordered tl input-no-border mb0 w" id="editHeaderTable">
                <thead>
                <tr class="BGF5 fw500">
                    <td class="p10 w300">请求头</td>
                    <td class="p10">内容/值</td>
                    <td class="w100 tc p10">操作</td>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
            <div onclick="addOneDebugTr('editHeaderTable')" class="main-color fr cursor pr15 mt10" title="添加一行"><i
                    class="iconfont f16 mt-3">&#xe604;</i> &nbsp;添加一行
            </div>
            <div class="cb"></div>
        </div>

        <!-- 请求参数 -->
        <div ng-class="{true: 'mt10 BGFFF pb10 shadow', false:'mt10 BGFFF pb10 shadow none'}[debugShowParam]">
            <input type="hidden" name="paramType" ng-model="model.paramType">

            <div class="btn-group btn-group-sm r3 m10">
                <button ng-class="{true: 'btn btn-main btn-sm param-type', false:'btn btn-default btn-sm param-type'}[model.paramType == 'FORM']"
                        type="button" ng-click="model.paramType = 'FORM'">
                    表单模式
                </button>
                <button ng-class="{true: 'btn btn-main btn-sm param-type', false:'btn btn-default btn-sm param-type'}[model.paramType == 'RAW']"
                        type="button" ng-click="model.paramType = 'RAW'">
                    自定义[Row]
                </button>
            </div>
            <div class="cb"></div>

            <input type="hidden" value="{{model.paramType}}" id="crap-debug-paramType">
            <div ng-class="{true: 'p10 bt1', false:'p10 bt1 none'}[model.paramType == 'RAW']">
                <textarea class="form-control no-resize" rows="8" ng-model="model.param" placeholder="请输入自定义/RAW/源数据" id="crap-debug-raw"></textarea>
            </div>

            <div ng-class="{true: 'pt0', false:'pt0 none'}[model.paramType == 'FORM']">
                <table class="table-bordered tl input-no-border mb0 w" id="editParamTable">
                    <thead>
                    <tr class="BGF5 fw500">
                        <td class="p10 w300">参数名</td>
                        <td class="p10">参数值</td>
                        <td class="w100 tc p10">操作</td>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <div onclick="addOneDebugTr('editParamTable')" class="main-color fr cursor pr15 mt10" title="添加一行">
                    <i class="iconfont f16 mt-3">&#xe604;</i> &nbsp;添加一行
                </div>
                <div class="cb"></div>
            </div>
        </div>
        <div class="code BGFFF mt20 p20 shadow none" id="crap-debug-result-div">
            <pre id="crap-debug-headers"></pre>
            <textarea id="crap-debug-result" class="form-control no-resize" rows="20" readonly></textarea>
        </div>
        <div class="code BGFFF mt20 p20 shadow" ng-if="debugResult">
            <pre>{{debugResult}}</pre>
        </div>
    </div>

</div>
<div class="cb"></div>

<script type="text/javascript">
    function loadEnvPick($this, e) {
        var obj = $($this);
        var config = {async: true, url:'newPick.do', type:'POST', timeout: 3000, loading:'PROP_UP', loadingText: '加载中...',
            tipTime:3, width:150, height:200, position: 5, tag: 'change-env'};
        showTipNew(config, e);
        callAjaxNew(config, {
            tag: 'change-env',
            code: 'PROJECT_ENV',
            key : obj.attr('crap-project-id'),
            iCallBack : 'changeProjectEnv'
        });
    }

    /**
     * 切换环境，存cookie中
     * @param data
     */
    function changeProjectEnv(result) {
        $("#env-name").html(result.name)
        $.cookie('projectEnv:' + result.value, result.id);
        $.cookie('projectEnvName:' + result.value, result.name);
        $("#refresh").click()
    }
</script>

